<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Flotr: JSON Data Example</title>
		<link rel="stylesheet" href="style.css" type="text/css" />
		<!--[if IE]><script type="text/javascript" src="../../flotr/mootools/lib/excanvas.js"></script><![endif]-->
		<script type="text/javascript" src="../../flotr/mootools/lib/mootools-release-1.11.js"></script>
		<script type="text/javascript" src="../../flotr/mootools/flotr.js"></script>
	</head>
	<body>
		
		<!-- ad -->
		
		<div id="wrapper">
			<h1>Flotr: JSON Data Example</h1>
			<div id="container" style="display:none;width:600px;height:300px;"></div>
			<button id="json-btn">Request JSON</button>
			<h2>Example</h2>
			<p>
			This example shows you how to use JSON data with Flotr. The canvas container is hidden when the page is
			loaded. By pressing the button a GET request is send to <a href="json.txt">json.txt</a>. 
			This returns a JSON string with data for three series. When the returned json is a valid object, the
			canvas container is shown and the graph is rendered with <code>Flotr.draw()</code>. Here's the requested json:
			</p>
			<pre><code class="javascript">{
	series:[{
			data:[[0,1],[1,4],[2,3],[3,6],[4,4.5]],
			points:{show:true},
			lines:{show:true}
		},
		[[0,0.5],[1,0.6],[2,1.8],[3,0.9],[4,2]],
		[[0,1.5],[1,2],[2,4.5],[3,3.5],[4,5.5]]
	],
	options:{
		mouse:{track:true},
		xaxis:{noTicks:10, tickDecimals:1}
	}
}</code></pre>
			<p>
			Let me give you one advise about JSON. To make sure you receive the data in the right format, use the Firefox extension <a href="http://www.getfirebug.com" title="Firebug Javascript Debug Extension">Firebug</a>
			to <code>console.log</code> (print) the response. With Firebug you can examine the Ajax request and it's response.					
			</p>
			<p>Finished? Go to the example <a href="index.html" title="Flotr Example Index Page">index page</a> or the <a href="http://www.solutoire.com/flotr/docs/" title="Flotr Documentation Pages">Flotr Documentation Pages</a>.</p>
			<h2>The Code</h2>
			<pre><code class="javascript">var f = null;		
$('json-btn').addEvent('click', function(){
	/**
	 * The json.txt contains a valid json string. Imagine this string
	 * is generated by some server-side script.
	 */
	new Json.Remote(
		'json.txt',{
			onComplete: function(json){
				if(json.series && json.options){
					/**
					 * The json is valid! Display the canvas container.
					 */
					$('container').setStyle('display','block');
					
					/**
					 * Draw the graph using the JSON data. Of course the
					 * options are optional.
					 */
				    f = Flotr.draw($('container'), json.series, json.options);
				}
			}
		}					
	).send();
});
</code></pre>
			<div id="footer">Copyright &copy; 2008 Bas Wenneker, <a href="http://www.solutoire.com">solutoire.com</a></div>
		</div>
		
		<!-- ad -->
		
		<script type="text/javascript">
			var f = null;		
			$('json-btn').addEvent('click', function(){
				/**
				 * The json.txt contains a valid json string. Imagine this string
				 * is generated by some server-side script.
				 */
				new Json.Remote(
					'json.txt',{
						onComplete: function(json){
							if(json.series && json.options){
								/**
								 * The json is valid! Display the canvas container.
								 */
								$('container').setStyle('display','block');
								
								/**
								 * Draw the graph using the JSON data. Of course the
								 * options are optional.
								 */
							    f = Flotr.draw($('container'), json.series, json.options);
							}
						}
					}					
				).send();
			});
		</script>
		
		<!-- analytics -->
	</body>
</html>
